<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="编辑地址" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>

        <view class="coreshop-padding-10" v-if="alert.show">
            <u-alert :title="alert.title" type="error" :description="alert.description" effect="dark"></u-alert>
        </view>

        <view class="coreshop-padding-10">
            <u--form :model="form" :rules="rules" ref="uForm" errorType="message" labelPosition="left" labelWidth="80">
                <u-form-item label="收货人" prop="name" borderBottom clearValidate>
                    <u--input v-model="form.name" placeholder="请填写收货人姓名" />
                </u-form-item>
                <u-form-item label="手机号" prop="mobile" borderBottom clearValidate>
                    <u--input v-model="form.mobile" placeholder="请填写收货人手机号" />
                </u-form-item>

                <u-form-item label="省市县" borderBottom>
                    <coreshop-select v-model="show" mode="mutil-column-auto" :list="pickerList" :default-value="pickerIndex" @confirm="onConfirm"></coreshop-select>
                    <!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
                    <!-- #ifndef APP-NVUE -->
                    <u-input :value="pickerValue" type="select" disabled placeholder="请选择省市区区域">
                        <template slot="suffix">
                            <!--<u-button text="请选择" type="success" size="mini" @click="toMap"></u-button>-->
                            <u-button text="请选择" type="success" size="mini" @click="show = true"></u-button>
                        </template>
                    </u-input>
                    <!-- #endif -->
                    <!-- #ifdef APP-NVUE -->
                    <u--input :value="pickerValue" type="select" disabled placeholder="请选择省市区区域">
                        <template slot="suffix">
                            <!--<u-button text="请选择" type="success" size="mini" @click="toMap"></u-button>-->
                            <u-button text="请选择" type="success" size="mini" @click="show = true"></u-button>
                        </template>
                    </u--input>
                    <!-- #endif -->
                </u-form-item>

                <u-form-item label="街道社区" borderBottom @click="toMap"  v-if="false">
                    <!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
                    <!-- #ifndef APP-NVUE -->
                    <u-input :value="form.street" type="text" disabled placeholder="请定位">
                        <template slot="suffix">
                            <u-button text="请选择" type="success" size="mini"></u-button>
                        </template>
                    </u-input>
                    <!-- #endif -->
                    <!-- #ifdef APP-NVUE -->
                    <u--input :value="form.street" type="text" disabled placeholder="请定位">
                        <template slot="suffix">
                            <u-button text="请选择" type="success" size="mini"></u-button>
                        </template>
                    </u--input>
                    <!-- #endif -->
                </u-form-item>

                <!--<u-form-item label="经度" prop="longitude" borderBottom>
                    <u--input v-model="form.longitude" disabled placeholder="请选择街道获取经度" />
                </u-form-item>

                <u-form-item label="纬度" prop="latitude" disabled borderBottom>
                    <u--input v-model="form.latitude" disabled placeholder="请选择街道获取纬度" />
                </u-form-item>-->

                <u-form-item label="详细地址" prop="address" borderBottom clearValidate>
                    <u--textarea v-model="form.address" placeholder="请输入内容"></u--textarea>
                    <!--<u--input  v-model="form.address" placeholder="请填写收货详细地址" type="textarea" />-->
                </u-form-item>
                <u-form-item label="设为默认">
                    <u-switch slot="right" v-model="checked"></u-switch>
                </u-form-item>
            </u--form>
        </view>

        <view class="coreshop-bottomBox">
            <button class="coreshop-btn coreshop-btn-square coreshop-btn-w" @click="delShip" v-if="id && id != 0" :disabled='submitStatus' :loading='submitStatus'>删除</button>
            <!-- #ifdef MP-WEIXIN -->
            <button class="coreshop-btn coreshop-btn-square coreshop-btn-w" @click="wechatAddress" v-if="!id">从微信获取</button>
            <!-- #endif -->
            <button class="coreshop-btn coreshop-btn-square coreshop-btn-b" @click="saveShip" :disabled='submitStatus' :loading='submitStatus'>保存</button>
        </view>
    </view>
</template>

<script>
    // #ifdef MP-WEIXIN
    const chooseLocation = requirePlugin('chooseLocation');
    // #endif
    // #ifdef APP-PLUS || APP-PLUS-NVUE
    // #endif
    export default {
        data() {
            return {
                getType: 1, //1手动输入，0从微信获取
                id: 0,
                form: {
                    name: '',
                    mobile: '',
                    address: '',
                    isDefault: 2,
                    longitude: '',
                    latitude: '',
                    street: ''
                },
                longitude: 0,
                latitude: 0,
                region: ['湖南省', '怀化市', '鹤城区'],
                areaId: this.$store.state.config.reshipAreaId || 0,
                checked: false,
                pickerValue: '',
                submitStatus: false,
                show: false,
                pickerList: this.$db.get("areaList"),
                province: this.$db.get("areaList"),
                pickerIndex: [17, 11, 1], // picker索引值
                provinceKey: 17,//省份id
                cityKey: 11,//市id
                areaKey: 1,//区域id
                rules: {
                    name: [
                        {
                            required: true,
                            message: '请输入姓名',
                            trigger: 'blur',
                        },
                        {
                            min: 2,
                            max: 10,
                            message: '姓名长度在2到10个字长',
                            trigger: ['change', 'blur'],
                        }
                    ],
                    address: [
                        {
                            required: true,
                            message: '请输入地址',
                            trigger: 'blur',
                        },
                        {
                            min: 5,
                            max: 50,
                            message: '地址长度在5到50个字符',
                            trigger: ['change', 'blur'],
                        }
                    ],
                    mobile: [
                        {
                            required: true,
                            message: '请输入手机号',
                            trigger: ['change', 'blur'],
                        },
                        {
                            validator: (rule, value, callback) => {
                                return this.$u.test.mobile(value);
                            },
                            message: '手机号码不正确',
                            trigger: ['change', 'blur'],
                        }
                    ]
                },
                alert: {
                    title: '获取定位失败，请检查是否开启定位功能。',
                    description: '未获取到您的经纬度坐标，我们需要获取您的经纬度坐标，来计算与发货点的配送距离。不然无法开启同城配送计算运费。',
                    closable: true,
                    show: false
                },
            }
        },
        onShow() {
            // #ifdef MP-WEIXIN
            const chooseLocation = requirePlugin('chooseLocation');
            const location = chooseLocation.getLocation();
            // #endif
            // #ifdef APP-PLUS || APP-PLUS-NVUE
            const location = uni.getLocation();
            // #endif
            if (location != null) {
                this.form.latitude = location.latitude;
                this.form.longitude = location.longitude;

                this.region = [location.province, location.district, location.city];
                this.form.street = location.name;
                if (this.getType == 1) {
                    this.form.address = location.address;
                }
                console.log("location1:", location);
            }
        },
        onUnload() {
            // 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
            // #ifdef MP-WEIXIN
            chooseLocation.setLocation(null);
            // #endif
            // #ifdef APP-PLUS || APP-PLUS-NVUE
            //uni.setLocation(null);
            // #endif
        },
        onLoad(e) {
            this.getMyLocation();
            if (e.shipId) {
                //编辑
                this.id = e.shipId;
                this.getShipInfo();
            } else {
                //添加（取消初始化）
                //this.pickerValue = this.region[0] + " " + this.region[1] + " " + this.region[2];
                this.init();
            }
        },
        computed: {},
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        },
        methods: {
            // 获取自己的位置信息
            getMyLocation() {
                let _this = this;
                // #ifdef MP-WEIXIN
                wx.getFuzzyLocation({
                    type: 'wgs84',
                    success(res) {
                        _this.latitude = res.latitude
                        _this.longitude = res.longitude
                        console.log('当前位置的经度1：' + res);
                    },
                    fail: function () {
                        _this.$u.toast("获取您的经纬度坐标失败")
                    }
                })
                // #endif
                // #ifndef MP-WEIXIN
                uni.getLocation({
                    type: 'wgs84',
                    success: function (res) {
                        _this.longitude = res.longitude;
                        _this.latitude = res.latitude;
                        console.log('当前位置的经度2：' + res);
                    },
                    fail: function () {
                        _this.$u.toast("获取您的经纬度坐标失败")
                    }
                });
                // #endif
            },
            onConfirm(e) {
                console.log(e);
                let provinceName = e[0].label;
                let cityName = e[1].label;
                let countyName = e[2].label;
                this.pickerValue = e[0].label + " " + e[1].label + " " + e[2].label
                let data = {
                    provinceName: provinceName,
                    provinceId: e[0].value,
                    cityName: cityName,
                    cityId: e[1].value,
                    countyName: countyName,
                    countyId: e[2].value,
                }
                this.$u.api.getAreaId(data).then(res => {
                    if (res.status) {
                        this.areaId = res.data;
                        this.init();
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: '地区选择出现问题，请重新选择地区',
                            showCancel: false
                        });
                    }
                });
            },
            //编辑获取收货地址信息
            getShipInfo() {
                let data = {
                    id: this.id
                }
                this.$u.api.shipDetail(data).then(res => {
                    if (res.status) {
                        let region = res.data.areaName.split(" ");
                        this.form.name = res.data.name;
                        this.form.mobile = res.data.mobile;
                        this.region = region;
                        this.areaId = res.data.areaId;
                        this.init();
                        this.pickerValue = this.region[0] + " " + this.region[1] + " " + this.region[2]
                        this.form.address = res.data.address;
                        this.form.isDefault = res.data.isDefault;
                        this.form.longitude = res.data.longitude;
                        this.form.latitude = res.data.latitude;
                        this.form.street = res.data.street;
                        if (res.data.isDefault) {
                            this.checked = true;
                            this.isDefault = 1;
                        } else {
                            this.checked = false;
                            this.isDefault = 2;
                        }
                    } else {
                        this.$u.toast('获取收货地址信息出现问题');
                        // this.submitStatus = false;
                    }
                    this.submitStatus = false;
                });
            },
            //删除地址
            delShip() {
                this.submitStatus = true;
                this.$u.api.removeShip({ 'id': this.id }).then(res => {
                    this.submitStatus = false;
                    if (res.status) {
                        this.$refs.uToast.show({
                            message: res.msg, type: 'success', complete: function () {
                                uni.navigateBack({
                                    delta: 1
                                });
                            }
                        })
                    } else {
                        this.$u.toast(res.msg);
                        // this.submitStatus = false;
                    }
                });
            },
            //存储收货地址
            saveShip() {
                this.$refs.uForm.validate().then(res => {
                    console.log('验证通过');
                    if (this.checked) {
                        this.form.isDefault = 1;
                    } else {
                        this.form.isDefault = 2;
                    }
                    this.submitStatus = false;
                    if (!this.form.name) {
                        this.$u.toast('请输入收货人姓名')
                        return false
                    } else if (!this.form.mobile) {
                        this.$u.toast('请输入收货人手机号')
                        return false
                    } else if (this.form.mobile.length !== 11) {
                        this.$u.toast('收货人手机号格式不正确')
                        return false
                    } else if (this.areaId <= 0) {
                        this.$u.toast('请选择地区信息')
                        return false
                    }
					 //else if (!this.form.street) {
                    //     this.$u.toast('请选择街道')
                    //     return false
                    // } else if (!this.form.latitude) {
                    //     this.$u.toast('请选择街道获取纬度')
                    //     return false
                    // } else if (!this.form.longitude) {
                    //     this.$u.toast('请选择街道获取经度')
                    //     return false
                    // }
                    let data = {
                        name: this.form.name,
                        address: this.form.address,
                        mobile: this.form.mobile,
                        isDefault: this.form.isDefault,
                        areaId: this.areaId,
                        longitude: this.form.longitude,
                        latitude: this.form.latitude,
                        street: this.form.street,
                    }
                    if (this.id && this.id != 0) {
                        //编辑存储
                        data.id = this.id
                        this.$u.api.editShip(data).then(res => {
                            this.submitStatus = false;
                            if (res.status) {
                                this.$refs.uToast.show({
                                    message: res.msg, type: 'success', complete: function () {
                                        uni.navigateBack({
                                            delta: 1
                                        });
                                    }
                                })
                            } else {
                                this.$u.toast(res.msg);
                                // this.submitStatus = false;
                            }
                        });
                    } else {
                        //添加
                        this.$u.api.saveUserShip(data).then(res => {
                            this.submitStatus = false;
                            if (res.status) {
                                this.$refs.uToast.show({
                                    message: res.msg, type: 'success', complete: function () {
                                        uni.navigateBack({
                                            delta: 1
                                        });
                                    }
                                })
                            } else {
                                this.$u.toast(res.msg);
                                // this.submitStatus = false;
                            }
                        });
                    }
                }).catch(errors => {
                    uni.$u.toast('提交的数据校验失败，请输入合法信息！')
                })
            },
            //倒查城市信息
            getFullPath(id, data) {
                for (var i = 0; i < data.length; i++) {
                    if (id == data[i].value) {
                        if (!data[i].children) {
                            this.areaKey = i;
                            return true;
                        } else if (data[i].hasOwnProperty("children")) {
                            if (data[i].children[0] && !data[i].children[0].children) {
                                this.cityKey = i;
                                return true;
                            } else {
                                this.provinceKey = i;
                                return true;
                            }
                        }
                    } else {
                        if (data[i].hasOwnProperty("children")) {
                            if (data[i].children[0] !== undefined) {
                                if (data[i].children[0].hasOwnProperty("children")) {
                                    this.provinceKey = i;
                                } else {
                                    this.cityKey = i;
                                }
                            }
                            if (typeof data[i].children != 'undefined') {
                                var res = this.getFullPath(id, data[i].children);
                                if (res) {
                                    return true;
                                }
                            }
                        }
                    }
                }
            },
            init() {
                this.getFullPath(this.areaId, this.province);
                this.pickerIndex = [this.provinceKey, this.cityKey, this.areaKey];
            },
            toMap() {
                // #ifdef MP-WEIXIN
                const txMapkey = this.$store.state.config.qqMapKey; //使用在腾讯位置服务申请的key
                const referer = this.$store.state.config.shopName; //调用插件的app的名称
                const location = JSON.stringify({
                    latitude: this.form.latitude == "" ? this.latitude : this.form.latitude,
                    longitude: this.form.longitude == "" ? this.longitude : this.form.longitude
                });
                const category = '';

                wx.navigateTo({
                    url: 'plugin://chooseLocation/index?key=' + txMapkey + '&referer=' + referer + '&location=' +
                        location + '&category=' + category
                });
                // #endif

                // #ifdef APP-PLUS || APP-PLUS-NVUE
                uni.chooseLocation({
                    success: (res) => {
                        this.form.street = res.name;
                        this.form.latitude = res.latitude;
                        this.form.longitude = res.longitude;
                    }
                });
                // #endif
            },
            // #ifdef MP-WEIXIN
            wechatAddress() {
                this.getType = 0;
                let _that = this;
                wx.chooseAddress({
                    success: res => {
                        if (res.errMsg == "chooseAddress:ok") {
                            //获取成功
                            _that.form.name = res.userName;
                            _that.form.mobile = res.telNumber;
                            _that.form.address = res.detailInfo;

                            _that.pickerValue = res.provinceName + " " + res.cityName + " " + res.countyName;
                            let data = {
                                provinceName: res.provinceName,
                                cityName: res.cityName,
                                countyName: res.countyName,
                            };
                            this.$u.api.getAreaId(data).then(res => {
                                if (res.status) {
                                    this.areaId = res.data;
                                    this.init();
                                } else {
                                    uni.showModal({
                                        title: '提示',
                                        content: '地区选择出现问题，请重新选择地区',
                                        showCancel: false
                                    });
                                }
                            });

                            console.log(res);
                        } else {
                            this.$refs.uToast.show({ title: '获取微信地址失败', type: 'error' });
                        }
                    }
                });
            },
            // #endif

        },

    }
</script>
<style lang="scss">
    page { background: #fff; }
</style>